import React, { Component, useContext } from 'react'
import PropTypes from 'prop-types'   //类型检查
import ReactDOM from 'react-dom'
import { Provider, connect } from 'react-redux'
import {
  HashRouter as Router,
  Link,
  Route,
  BrowserRouter,
} from "react-router-dom";
import { createStore } from 'redux';

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee",
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222",
  },
};

const ThemeContext = React.createContext(themes.light);
// const ThemeContext = React.createContext(); // 默认值为空，必须用 Provider 包裹子组件，提供value属性，子组件才能取到context中的值

function App() {
  return (
    <>
      {/* <ThemeContext.Provider value={themes.light}> */}
      <Toolbar />
      <Toolbar />
      {/* </ThemeContext.Provider> */}
    </>
  );
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

export default function () {
  return (
    <div>
      <ul className="menu">
        <li>
          <Link to="/Home">home</Link>
        </li>
      </ul>
      <App></App>
    </div>
  );
}
